<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>地图类型</title>

    <!--leaflet样式文件-->
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    />
    <!--leaflet核心JS文件-->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <!-- 引入 ChineseTmsProviders.js文件-->
    <script src="./leafletChineseTmsProviders.js"></script>

    <style>
      * {
        padding: 0;
        margin: 0;
      }
      /*必须指定宽高度*/
      #map {
        width: 100%;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      // 天地图内容
      const TianDinormalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
        maxZoom: 18,
        minZoom: 5
      })
      const TianDinormala = L.tileLayer.chinaProvider(
        'TianDiTu.Normal.Annotion',
        {
          maxZoom: 18,
          minZoom: 5
        }
      )
      const TianDiimgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
        maxZoom: 18,
        minZoom: 5
      })
      const TianDiimga = L.tileLayer.chinaProvider(
        'TianDiTu.Satellite.Annotion',
        {
          maxZoom: 18,
          minZoom: 5
        }
      )
      const TianDi = L.layerGroup([TianDinormalm, TianDinormala]) //天地图
      const TianDiImage = L.layerGroup([TianDiimgm, TianDiimga]) //天地图影像

      // 高德地图
      const Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
        maxZoom: 18,
        minZoom: 5
      })
      const Gaodeimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
        maxZoom: 18,
        minZoom: 5
      })
      const Gaodeimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
        maxZoom: 18,
        minZoom: 5
      })
      const GaodeImage = L.layerGroup([Gaodeimgem, Gaodeimga]) //高德影像

      // 谷歌地图
      const Google = L.tileLayer.chinaProvider('Google.Normal.Map', {
        maxZoom: 18,
        minZoom: 5
      })
      const Googleimgem = L.tileLayer.chinaProvider('Google.Satellite.Map', {
        maxZoom: 18,
        minZoom: 5
      })
      const Googleimga = L.tileLayer.chinaProvider('Google.Satellite.Annotion', {
        maxZoom: 18,
        minZoom: 5
      })
      const GoogleImage = L.layerGroup([Googleimgem, Googleimga]) //谷歌影像

      // OSM地图
      const OSM = L.tileLayer.chinaProvider('OSM.Normal.Map', {
        maxZoom: 18,
        minZoom: 5
      })

      // 百度地图
      const Baidu = L.tileLayer.chinaProvider('Baidu.Normal.Map', {
        maxZoom: 18,
        minZoom: 5
      })
      const Baiduimgem = L.tileLayer.chinaProvider('Baidu.Satellite.Map', {
        maxZoom: 18,
        minZoom: 5
      })
      const Baiduimga = L.tileLayer.chinaProvider('Baidu.Satellite.Annotion', {
        maxZoom: 18,
        minZoom: 5
      })
      const BaiduImage = L.layerGroup([Baiduimgem, Baiduimga])  //百度影像

      // 智图地图
      const normalm1 = L.tileLayer.chinaProvider('Geoq.Normal.Map', {
        maxZoom: 18,
        minZoom: 5
      })
      const normalm2 = L.tileLayer.chinaProvider('Geoq.Normal.Color', {
        maxZoom: 18,
        minZoom: 5
      })
      const normalm3 = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {
        maxZoom: 18,
        minZoom: 5
      })
      const normalm4 = L.tileLayer.chinaProvider('Geoq.Normal.Gray', {
        maxZoom: 18,
        minZoom: 5
      })
      const normalm5 = L.tileLayer.chinaProvider('Geoq.Normal.Warm', {
        maxZoom: 18,
        minZoom: 5
      })
      const normalm6 = L.tileLayer.chinaProvider('Geoq.Normal.Cold', {
        maxZoom: 18,
        minZoom: 5
      })

      // 瓦片图层
      const baseLayers = {
        天地图: TianDi,
        天地图影像: TianDiImage,

        高德地图: Gaode,
        高德影像: GaodeImage,

        谷歌地图: Google,
        谷歌影像: GoogleImage,

        OSM地图: OSM,

        百度地图: Baidu,
        百度影像: BaiduImage,

        智图地图: normalm1,
        智图多彩: normalm2,
        智图午夜蓝: normalm3,
        智图灰色: normalm4,
        智图暖色: normalm5,
        智图冷色: normalm6
      }

      let map = L.map('map', {
        center: [23.127013, 113.366266],
        zoom: 8,
        layers: [normalm1], // 选择baseLayers的瓦片地图
        zoomControl: false,
        attributionControl:false,
        // key: 'Your key' // 如果你使用天地图，请添加密钥key
      })

      L.control.layers(baseLayers, null,{
        position:'bottomright',
        collapsed:true
      }).addTo(map)

      // 缩放控件
      L.control
        .zoom({
          zoomInText:'+', //放大文本
          zoomInTitle:'放大', //放大标题
          zoomOutText: '-',  //缩小文本
          zoomOutTitle: '缩小' //缩小标题
        })
        .addTo(map)
    </script>
  </body>
</html>
